<template>
  <div class="order">
    <common-header></common-header>
    <div class="content">
      <h1>请确认订单信息</h1>
      <br />
      <div>选择收货地址：</div>
      <!-- <Select v-model="address" style="width:200px">
        <Option v-for="item in addresses" :value="item.place" :key="item.id">{{
          item.place
        }}</Option>
      </Select> -->
      <div class="address">
        <div
          v-for="item in addresses"
          :class="{ 'address-item': true, 'address-item-checked': item.id === choose.id }"
          @click="chooseAddress(item)"
        >
          <div>收货人：{{ item.name }}</div>
          <div>联系方式：{{ item.phone }}</div>
          <div>收货地址：{{ item.place }}</div>
        </div>
        <div
          style="margin-left:30px;line-height:140px;text-align:center;"
          @click="showAddAddress = true"
          class="address-item"
        >
          <Icon type="md-add" size="50" color="#933" />
        </div>
      </div>

      <br />
      <br />
      <div></div>
      <div>订单信息</div>
      <Table :columns="column" :data="goodss">
        <template slot="count" slot-scope="{ row }">
          {{ row.ordergoods.count }}
        </template>
      </Table>
      <br />
      <div>总计：￥{{ total }}</div>
      <br />
      <Button type="success" @click="pay">付款</Button>

      <Modal v-model="showAddAddress" title="新建地址" @on-ok="addAddress" @on-cancel="cancel">
        <div class="form-title">收货人<span style="color:red;">*</span></div>
        <input type="text" class="form-ipt" placeholder="输入收货人" v-model="add_address.name" />
        <div class="form-title">联系方式<span style="color:red;">*</span></div>
        <input
          type="text"
          class="form-ipt"
          placeholder="输入联系方式"
          v-model="add_address.phone"
        />
        <div class="form-title">收货地址<span style="color:red;">*</span></div>
        <input
          type="text"
          class="form-ipt"
          placeholder="输入收货地址"
          v-model="add_address.place"
        />
      </Modal>

      <Modal v-model="showQrcode" @on-cancel="(step = 1) && (showQrcode = false)" footer-hide>
        <div v-if="step === 1">
          <div style="text-align:center;">
            <h3>请选择付款方式</h3>
            <div style="display:flex;margin:20px auto;justify-content:center;">
              <div class="pay" @click="next">支付宝</div>
              <div class="pay" @click="next">微信</div>
            </div>
          </div>
        </div>
        <div
          v-else
          style="display:flex;flex-flow:column; align-items:center;justify-content:center;"
        >
          <img src="/img/qrcode.png" alt="" style="height:180px;width:180px;margin-bottom:20px;" />
          <div style="margin-bottom:30px;">
            <h1>需要支付： ￥{{ total }}</h1>
          </div>
          <button class="btn" @click="re_pay">支付</button>
        </div>
      </Modal>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showQrcode: false,
      step: 1,
      column: [
        {
          title: "商品名",
          key: "title"
        },
        {
          title: "价格",
          key: "price"
        },
        {
          title: "数量",
          // key: "price"
          slot: "count"
        }
      ],
      total: 0,
      add_address: {
        phone: "",
        name: "",
        place: ""
      },
      goodss: [],
      addresses: [],
      showAddAddress: false,
      choose: {}
    };
  },
  mounted() {
    const id = this.$route.query.id;
    this.getOrder(id);
    this.getAddress();
  },
  methods: {
    getOrder(id) {
      this.$api.order.getOne(id).then(data => {
        this.goodss = data.goods;
        this.total = data.total;
      });
    },
    chooseAddress(address) {
      this.choose = address;
    },
    getAddress() {
      this.$api.address.get().then(data => {
        this.addresses = data;
      });
    },
    addAddress() {
      if (
        this.add_address.name === "" ||
        this.add_address.phone === "" ||
        this.add_address.place === ""
      ) {
        this.$toast.info("请完善信息后提交！");
        return;
      }
      this.$api.address.add(this.add_address).then(data => {
        this.addresses.push(data);
        this.add_address = {
          place: "",
          name: "",
          phone: ""
        };
        this.$toast.success("添加成功");
      });
      this.showAddAddress = false;
    },
    cancel() {
      this.showAddAddress = false;
    },
    pay() {
      if (!this.choose.id) {
        this.$toast.info("请选择收货地址");
        return;
      } else {
        this.showQrcode = true;
      }
    },
    next() {
      this.step = 2;
    },
    re_pay() {
      this.$api.order.pay(this.$route.query.id, this.choose).then(data => {
        this.$toast.success("付款成功");
        this.$router.push("/myorder");
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  margin: 30px 15%;
  background: #fff;
  box-shadow: 0 0 10px #fff;
  padding: 30px;
  .address {
    display: flex;
    flex-flow: row wrap;
  }
  .address-item {
    padding: 10px 15px;
    border: 1px dashed #933;
    margin: 10px;
    min-width: 140px;
    height: 140px;
    transition: 0.3s;
  }
  .address-item-checked {
    border: 2px solid #933;
  }
}
.pay {
  padding: 5px 8px;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
  margin: 0 10px;
}
</style>
